<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <button id="btn">123123</button>
    </div>
    <script>
      const data = {
        name: "张三",
      };
      const definePropertyObj = (obj) => {
        const target = {};
        Object.keys(obj).forEach((key) => {
          target[key] = obj[key];
          Object.defineProperty(obj, key, {
            get() {
              console.log("get", target);
              return target[key];
            },
            set(newVal) {
              console.log("set");
              if (target[key] === newVal) return;
              target[key] = newVal;
            },
          });
        });
      };
      definePropertyObj(data);
      const btn = document.getElementById("btn");
      btn.addEventListener("click", () => {
        console.log(123123, data.name);
        data.name = "历史";
      });
    </script>
  </body>
</html>
